<script setup name="pageDashboard">
import { ref } from 'vue'
import ImageUpload from "@/components/ImageDragUpload.vue"
import ImageMultipleUpload from "@/components/ImageMultipleUpload.vue"

const imageUrl = ref('')
const setPhoto = (item) => {
    imageUrl.value = item.url || ""
}

const imageUrls = ref([])
const setImageUrls = (val) => {
    console.log(val)
    if (val[2]) {
        imageUrls.value = JSON.parse(JSON.stringify(val[2]))
        return false
    }
    if (val[0] >= 0) {
        if (!val[1]) {
            imageUrls.value.splice(val[0], 1)
        } else {
            imageUrls.value.splice(val[0], 1, val[1])
        }
    } else {
        imageUrls.value.push(val[1])
    }
}

</script>

<template>
    <div>
        dashboard
        <ImageUpload :imageUrl="imageUrl" :folder="'products'" @emitImageUrl="setPhoto"></ImageUpload>
        <ImageMultipleUpload :imageUrls="imageUrls" :folder="'products'" :multiple="true" @emitImageUrls="setImageUrls"></ImageMultipleUpload>
    </div>
</template>

<style lang="scss" scoped>
</style>